<template>
    <div class="content">
        <div class="about-item" v-for="item in collegesData" :key="item.name">
                <div class="about-item-left">
                    <div class="item-text">
                        <div class="zy_conts">
                            <div class="item">
                                <div>
                                    <div class="cont_pic">
                                        <img :src="item.image">
                                    </div>
                                </div>
                                <div class="cont_r">
                                    <div>
                                        <h5 v-text="item.name"></h5>
                                        <p>英文名称：{{ item.officeHours }}</p>
                                        <!-- <span class="time" v-text="item.officeHours"> </span> -->
                                        <p>学校地址：{{ item.tel }}</p>
                                    </div>
                                    <span class="contact">合作内容：{{ item.address }}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
    </div>
</template>
<script setup lang="ts">
import { collegesListApi } from "../../api/work/work";
import type { CollegesModel } from "../../api/work/work";
const collegesData=ref<CollegesModel[]>([])
import {cloneDeep} from 'lodash'
onMounted(async()=>{
   const res= await collegesListApi()
   if(res.code===200){
    collegesData.value=cloneDeep(res.data)??[]
   }else{
    ElMessage.error(res.msg)
   }
})
</script>
<style scoped lang='less'>
 .content{
           width: calc(100% - 220px);
           // background-color: red;
           height: 100%;

       }
       .about-item .item-text {
    padding-top: 20px;
}
       .zy_conts .item {
                                width: 100%;
                                height: 200px;
                                background: #fff;
                                border: 1px solid #f9f9f9;
                                box-shadow: 0 4px 9px 0 rgb(40 40 40 / 12%);
                                border-radius: 10px;
                                padding: 25px 30px;
                                display: flex;
                                position: relative;
                                margin-bottom: 30px;
                            }
                            .zy_conts .item .cont_pic {
                                width: 300px;
                                height: 150px;
                                position: relative;
                                overflow: hidden;
                            }
                            .zy_conts .item .cont_pic img {
                                width: 100%;
                            }
                            .zy_conts .item .cont_r {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                margin-left: 30px;
                            }
                            .zy_conts .item .cont_r a {
                                display: block;
                            }
                            .zy_conts .item .cont_r .contact {

                            }
                            .zy_conts .item .cont_r h5 {
                                display: block;
                                font-size: 20px;
                                font-weight: 600;
                                color: #525252;
                                line-height: 34px;
                                margin-bottom: 10px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .zy_conts .item .cont_r a .time {
                                margin-bottom: 10px;
                            }
                            .zy_conts .item .cont_r p {
                                font-size: 16px;
                                color: #525252;
                                line-height: 24px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                                margin-bottom: 10px;
                            }
                            .zy_conts .item .cont_r span {
                                display: inline-block;
                                font-size: 16px;
                                color: #525252;
                                line-height: 24px;
                            }
                            a{
    text-decoration: none;
}
</style>
